<!--
 * @Author: 刘凯欣
 * @Date: 2024-06-27 11:26:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-27 16:36:39
 * @Description: 
-->

<template>
  <div>
    
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="店铺名称" width="180" />
      <el-table-column prop="cancelNumber" label="取消单数" />
      <el-table-column prop="totalNumber" label="推单数" />
      <el-table-column prop="cancellation" label="取消率">
        <template #default="scope">
          {{ (scope.row.cancellation * 100).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="预估取消率">
        <template #default="scope">{{ getNumbers(scope.row) }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "商家1",
          cancelNumber: "8", //取消单数
          totalNumber: "120", //推单数
          cancellation: "0.0667", //取消率 百分比 等于6.67%
        },
        {
          name: "商家2",
          cancelNumber: "1", //取消单数
          totalNumber: "40", //推单数
          cancellation: "0.025", //取消率 百分比 等于2.50%
        },
        {
          name: "商家3",
          cancelNumber: "2", //取消单数
          totalNumber: "28", //推单数
          cancellation: "0.0714", //取消率 百分比 等于7.14%
        },
      ],
      Cancellation: [
        {
          name: "取消率：≥",
          type: "1",
          value: "3",
          colorName: "预警颜色",
          colorValue: "orange",
        },
        {
          name: "取消率：≥",
          type: "1",
          value: "5",
          colorName: "预警颜色",
          colorValue: "red",
        },
        {
          name: "取消率：≥",
          type: "1",
          value: "10",
          colorName: "预警颜色",
          colorValue: "blue",
        },
      ],
    };
  },
  methods: {
    getNumber2s(row) {
      // 取消率是通过 取消单数除以推单数 获取；
      // 预估取消率是 通过当前这行的 取消单率cancellation 与 Cancellation数组中每一项比较 value值，value值可能会带有小数点7.6
      // 如果取消率为6%就返回Cancellation数组中value为5的值，不返回3 ，因为5比3更靠近6；
      // 如果取消率为12%就返回Cancellation数组中value为10的值，
      // 如果取消率为2%就返回--
      // 如果 tableData 中 商家3的 预估取消率  是 6%，需要返回 推单数增加多少单 退单率就降低到5%，展示效果： 预估取消率 5%--(增加？单)；
      // 如果 tableData 中 商家3的 预估取消率  是 5%，需要返回 展示效果： 预估取消率 5%--(增加0单)；

     
      const currentCancellationRate = row.cancellation * 100;
      
    },
    getNumbers(row) {
      const currentCancellationRate = row.cancellation * 100;
      let nearestValue = "--";
      let additionalOrders = 0;

      // 找到最接近当前取消率的阈值
      this.Cancellation.forEach(item => {
        if (currentCancellationRate >= item.value) {
          nearestValue = item.value;
        }
      });

      if (nearestValue !== "--") {
        nearestValue = parseFloat(nearestValue);

        // 如果当前取消率和最近的阈值相等，返回预估取消率为0
        if (currentCancellationRate === nearestValue) {
          return ` ${nearestValue}% -- (增加0单)`;
        }

        // 计算需要增加多少单，取消率会降低到最近的阈值
        const cancelNumber = parseFloat(row.cancelNumber);
        const totalNumber = parseFloat(row.totalNumber);

        additionalOrders = Math.ceil((cancelNumber / (nearestValue / 100)) - totalNumber);

        return ` ${nearestValue}% -- (增加${additionalOrders}单)`;
      }

      return ` ${nearestValue}`;
    },
  
  },
};
</script>
